(function (fruit, util, dom, ui) {
    ui.define('fruit.ui.ComboBox', {
        events: ['CHANGE'],
        view: {
            tag: 'span',
            props: {
                'tabIndex': "0",
                'class': 'f-combobox',
                'role': 'combobox',
                'aria-haspopup': true,
                'aria-expanded': false,
                'aria-disabled': '{#disabled}',
                style: {
                    'width': "{#width}"
                }
            },
            content: [
                {
                    name: 'text',
                    tag: 'input',
                    props: {
                        'type': 'text',
                        value: '{#selectionText}',
                        readonly: '{#!editable}',
                        disabled: '{#disabled}'
                    }
                },
                {
                    name: 'btn',
                    tag: 'span',
                    props: {
                        'class': 'f-combobox-btn'
                    }
                },
                {
                    name: 'popup',
                    type: 'fruit.ui.Popup',
                    props: {
                        role: "menu",
                        'aria-labelledby': 'combobox'
                    },
                    content: {
                        props: {
                            tabindex: '-1',
                            'class': 'f-list',
                            role: 'list'
                        },
                        content: {
                            name: 'list',
                            type: 'fruit.ui.SelectableList',
                            props: {
                                'class': 'f-list-wrap',
                                multiple: '{#multiple}',
                                selectedIndex: '{#selectedIndex}',
                                selectedItem: '{#selectedItem}',
                                selectedItems: '{#selectedItems}',
                                items: '{#items}',
                                labelPath: '{#labelPath}',
                                selectionText: '{#selectionText}'
                            }
                        }
                    }
                }
            ]
        },
        properties: {
            selectedIndex: {
                value: -1,
                observable: true
            },
            selectedItem: {
                value: null,
                observable: true
            },
            selectedItems: {
                observable: true
            },
            items: {
                value: null,
                observable: true
            },
            labelPath: {
                observable: true
            },
            disabled: {
                value: false,
                observable: true
            },
            editable: {
                value: false,
                observable: true
            },
            width: {
                value: 200,
                observable: true
            },
            multiple: {
                value: false,
                observable: true
            },
            selectionText: {
                value: null,
                observable: true
            }
        },
        methods: {
            onInit: function () {
                this.inherited();
                this._attachEvents();
                var text = this.$('text');
                this.listen("selectedItem", function (sender, args) {
                    var value = args.newValue;
                    var labelPath = this.labelPath();
                    if (value) {
                        if (labelPath) {
                            value = value.get ? value.get(labelPath) : value[labelPath];
                        }
                        text.set('value', value);
                        this.fire("change");
                    }
                    else {
                        text.set('value', '');
                    }
                });
            },
            _attachEvents: function () {
                this.$("text").on('focus', function () {
                    this.open();
                    this.addClass('f-combobox-focus');
                }, this);
                this.on('blur', function () {
                    this.close();
                    dom.blur(this.$("text")._element);
                    this.removeClass('f-combobox-focus');
                }, this);
                this.$("btn").on('click', function () {
                    this.open();
                }, this);
            },
            _focus: function () {
                this.open();
                this.addClass('f-combobox-focus');
            },
            _blur: function () {
                this.close();
                dom.blur(this.$("text")._element);
                this.removeClass('f-combobox-focus');
            },
            open: function (inOptions) {
                if (!this.disabled()) {
                    var self = this;
                    this.$("popup").open(util.extend({
                        align: true,
                        target: self,
                        offsetY: 2,
                        position: 'outerBottom'
                    }, inOptions));
                }
            },
            close: function () {
                this.$("popup").close();
            }
        }
    });
})(fruit, fruit.util, fruit.dom, fruit.ui);